<template>
	<common-card class="portal_video_learn">
		<a-table v-bind="tableConfig" :data="tableListData"></a-table>
		<a-pagination size="small" :total="tableData.length" v-model:current="pageCurrent" v-model:pageSize="pageSize" />
	</common-card>
</template>

<script lang="ts" setup>
import commonCard from '../commonCard.vue';
defineOptions({ name: 'VideoLearn' });
interface TableProp {
	week: string;
	node: string;
	course: string;
	address: string;
	status: number;
}
const pageSize = ref(7);
const pageCurrent = ref(1);
const tableConfig = ref({
	bordered: false,
	pagination: false,
	pagePosition: 'bottom',
	scroll: { maxHeight: 205 },
	columns: [
		{ title: '学号', dataIndex: 'sid' },
		{ title: '姓名', dataIndex: 'name' },
		{ title: '观看次数', dataIndex: 'lookCount' },
		{ title: '观看时长', dataIndex: 'lookDuration' },
		{ title: '时长最多', dataIndex: 'longestTime' },
		{ title: '回退最多', dataIndex: 'rollbackCount' }
	]
});
const tableData = reactive<TableProp[]>([
	{ sid: '20200801', name: '第一节', lookCount: '高等数学', lookDuration: '100', longestTime: '第2讲', rollbackCount: '第2讲' },
	{ sid: '20200802', name: '第二节', lookCount: '高等数学', lookDuration: '100', longestTime: '第2讲', rollbackCount: '第2讲' },
	{ sid: '20200803', name: '第三节', lookCount: '高等数学', lookDuration: '100', longestTime: '第2讲', rollbackCount: '第2讲' },
	{ sid: '20200804', name: '第四节', lookCount: '高等数学', lookDuration: '100', longestTime: '第2讲', rollbackCount: '第2讲' },
	{ sid: '20200805', name: '第五节', lookCount: '高等数学', lookDuration: '100', longestTime: '第2讲', rollbackCount: '第2讲' },
	{ sid: '20200806', name: '第六节', lookCount: '高等数学', lookDuration: '100', longestTime: '第2讲', rollbackCount: '第2讲' },
	{ sid: '20200807', name: '第七节', lookCount: '高等数学', lookDuration: '100', longestTime: '第2讲', rollbackCount: '第2讲' },
	{ sid: '20200808', name: '第一节', lookCount: '高等数学', lookDuration: '100', longestTime: '第2讲', rollbackCount: '第2讲' },
	{ sid: '20200809', name: '第二节', lookCount: '高等数学', lookDuration: '100', longestTime: '第2讲', rollbackCount: '第2讲' },
	{ sid: '20200810', name: '第三节', lookCount: '高等数学', lookDuration: '100', longestTime: '第2讲', rollbackCount: '第2讲' },
	{ sid: '20200811', name: '第四节', lookCount: '高等数学', lookDuration: '100', longestTime: '第2讲', rollbackCount: '第2讲' }
]);
const tableListData = computed(() => {
	let page = pageCurrent.value;
	let limit = pageSize.value;
	return tableData.slice((page - 1) * limit, page * limit);
});
</script>

<style lang="scss" scoped>
.portal_video_learn {
	&:deep(.arco-card-body) {
		flex-direction: column;
	}
	.arco-table {
		flex: 1;
		min-height: 245px;
		overflow: hidden;
	}
	.arco-pagination {
		padding: 12px;
		justify-content: center;
	}
}
</style>
